<template>
  <v-card flat class="InvoiceList-Container rounded-lg">
    <List v-model="selected" v-if="invoiceList" :list="invoiceList">
      <template #menu-list-item>
        <v-list-item class="list-item" @click="deleteInvoice">
          <v-list-item-title>
            <v-list-item-icon>
              <v-icon class="delete-icon icon">mdi-delete</v-icon>
            </v-list-item-icon>
            <span class="text"> Delete Invoice </span>
          </v-list-item-title>
        </v-list-item>
        <v-list-item class="list-item">
          <v-list-item-title>
            <v-list-item-icon>
              <v-icon class="icon">mdi-file-multiple</v-icon>
            </v-list-item-icon>
            <span class="text"> Copy Invoice </span>
          </v-list-item-title>
        </v-list-item>
      </template>
      <template #item="{ item }">
        <v-list-item-content class="py-0">
          <v-list-item-title v-text="item.id"></v-list-item-title>

          <v-list-item-subtitle class="text--primary">
            {{ item.prospect }} - {{ item.prospectName }}
          </v-list-item-subtitle>

          <v-list-item-subtitle v-text="item.address"></v-list-item-subtitle>
        </v-list-item-content>

        <v-list-item-action class="my-0">
          <v-list-item-action-text>
            <span class="mr-2"> Phase {{ item.phase }} </span>
            <v-chip
              text-color="#fff"
              :color="item.status === 'new' ? '#556282' : '#EB9B31'"
              x-small
              label
              v-text="item.status"
            >
            </v-chip
          ></v-list-item-action-text>
          <span>A/C <span v-if="!item.posted">Not</span> posted</span>
          <span> {{ item.quote }} </span>
        </v-list-item-action>
      </template>
    </List>
    <v-skeleton-loader v-else type="list-item@9"></v-skeleton-loader>
  </v-card>
</template>
<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import List from "@/components/List/List.vue";
interface IQuoteInfo {
  id: string;
  status: string;
  phase: number;
  prospect: string;
  prospectName: string;
  address: string;
  quote: string;
  createName: string;
  createDate: string;
  lastModifiedName: string;
  lastModifiedDate: string;
}
@Component({
  components: {
    List,
  },
})
export default class InvoiceList extends Vue {
  selected: null | number = null;
  invoiceList: Array<IQuoteInfo> | null = null;
  @Watch("selected")
  changeSelected(index: number) {
    if (typeof index === "number") {
      const selectedInvoice = (this.invoiceList as Array<IQuoteInfo>)[index];
      this.$store.commit("InvoiceStore/setInvoiceInfo", selectedInvoice);
    } else {
      this.$store.commit("InvoiceStore/setInvoiceInfo", null);
    }
  }

  getQuoteDetails() {
    new Promise<Array<IQuoteInfo>>((res) => {
      const invoiceList = [
        {
          id: "IN-220029",
          status: "new",
          phase: 1,
          prospect: "Q-22049",
          prospectName: "Cafe de Coral",
          address: "New restaurant in TW",
          quote: "3,000.000.00",
          createName: "Candy Wong",
          createDate: "2022-03-02 11:30",
          lastModifiedName: "Tony Ma",
          lastModifiedDate: "2022-04-04 17:43",
          posted: false,
        },
        {
          id: "IN-220012",
          status: "Issued",
          phase: 3,
          prospect: "Q-220036",
          prospectName: "Tai Hing",
          address: "Ma On Shan",
          quote: "4,000.000.00",
          createName: "Candy Wong",
          createDate: "2022-03-02 12:30",
          lastModifiedName: "Tony Ma",
          lastModifiedDate: "2022-04-04 19:43",
          posted: true,
        },
      ];
      setTimeout(() => {
        console.log("res");
        res(invoiceList);
      }, 1000);
    }).then((res) => {
      this.invoiceList = res;
    });
  }

  deleteInvoice() {
    if (this.selected !== null && this.selected !== undefined) {
      this.$emit("openDeleteInvoiceDialog");
    } else {
      // 提示警告先选择Quote再进行操作
    }
  }

  created() {
    this.getQuoteDetails();
  }
}
</script>
<style lang="scss" scoped>
@import "./InvoiceList.scss";
</style>
